<template>
    <div class="center">
        <div class="one">
            <!-- 外面设置 弹性居中 -->
            <div class="centerText">
                <div class="left">
                    <h1>24小时直播</h1>
                    <p>数字人直播，节约90%成本，让直播更便捷</p>
                    <el-button type="primary" round>立即制作</el-button>
                </div>
                <div class="right">
                    <img src="../assets/img/zhibozhongxinbg.png" alt="">
                </div>
            </div>
        </div>

        <div class="moreNeed_warpper">
            <div class="conterText">

                <div class="content-title">
                    多种直播方式，满足客户各类直播需求
                </div>

                <div class="tab_warpper">
                    <div class="tab_inner">
                        <span class="tab_inner_span " @click="showNUm = 0" :class="{ active: showNUm == 0 }">24自动播</span>
                        <span class="tab_inner_span " @click="showNUm = 1" :class="{ active: showNUm == 1 }">真人直播</span>
                    </div>
                </div>

                <div class="inner_wrapper" :class="{ hide: showNUm == 1 }">
                    <div class="box">
                        <div class="box_left">
                            <h3>24小时自动直播</h3>
                            <p class="item_right_subTitle">企业自研数字人直播技术，以数字人为核心，实现多领域，场景次元24小时不间断直播</p>
                            <div class="item_right_imgList">
                                <p><img src="../assets/img/tick.png" alt=""><span>强大核心技术，24小时直播不间断</span></p>
                                <p><img src="../assets/img/tick.png" alt=""><span>一台电脑=一个直播团队+N个主播</span></p>
                                <p><img src="../assets/img/tick.png" alt=""><span>多种直播驱动方式，简单高效</span></p>
                                <p><img src="../assets/img/tick.png" alt=""><span>贴心售后教学，用户体验之上</span></p>
                            </div>
                        </div>
                        <div class="box_right">
                            <div class="swiper-slide">
                                <img src="../assets/img/zidongzhibo.png" alt="">
                            </div>
                        </div>

                    </div>
                </div>
                <div class="inner_wrapper" :class="{ hide: showNUm == 0 }">
                    <div class="box">
                        <div class="box_left">
                            <h3>真人直播</h3>
                            <p class="item_right_subTitle">直播运营可语言直播运营可语音实时驱动数字人，主播话术可随直播效果切换，低成本实现超值效果。</p>
                            <div class="item_right_imgList">
                                <p><img src="../assets/img/tick.png" alt=""><span>真人语音实时驱动，开启高效直播</span></p>
                                <p><img src="../assets/img/tick.png" alt=""><span>真人动补设备驱动，开启3D虚拟直播</span></p>
                                <p><img src="../assets/img/tick.png" alt=""><span>上千个数字人资产可选、可DIY</span></p>
                                <p><img src="../assets/img/tick.png" alt=""><span>完善的售后教学,快速上手</span></p>
                            </div>
                        </div>
                        <div class="box_right">
                            <div class="swiper-slide">
                                <img src="../assets/img/zhenren.png" alt="">
                            </div>
                        </div>

                    </div>
                </div>

            </div>

        </div>

        <div class="priceReviewWarppper">
            <div class="conterText ">
                <div class="content-title">
                    数字人直播，1/10的价格，效果媲美真人
                </div>
                <div class="digitalHumanLive">
                    <span class="dig-left">
                        <div class="dig-l-main">
                            <div class="dig-lt-img"><img src="../assets/img/chuantongzhibo.png" alt=""></div>
                            <div class="dig-lt-main">
                                <div class="dig-lt-main-tit">传统直播</div>
                                <p><img src="../assets/img/cross.png" alt="">真人主播人力成本昂贵</p>
                                <p><img src="../assets/img/cross.png" alt="">无法长时间工作、风险高</p>
                                <p><img src="../assets/img/cross.png" alt="">需要搭建场地、灯光、布景</p>
                                <p><img src="../assets/img/cross.png" alt="">需要专业直播团队来操作</p>
                                <p><img src="../assets/img/cross.png" alt="">需要专业直播团队来操作</p>

                            </div>
                        </div>
                    </span>

                    <span class="dig-right">
                        <div class="dig-r-mian">
                            <div class="dig-rt-img"><img src="../assets/img/shuzirenzhibo.png" alt=""></div>
                            <div class="dig-rt-main">
                                <div class="dig-rt-main-tit">数字人直播</div>
                                <p><img src="../assets/img/tick(3).png" alt="">数字人主播便宜，节省90%成本</p>
                                <p><img src="../assets/img/tick(3).png" alt="">随时随地开播，24小时直播</p>
                                <p><img src="../assets/img/tick(3).png" alt="">只需一部手机、一台电脑</p>
                                <p><img src="../assets/img/tick(3).png" alt="">一次配置即可，小白也能轻松上手</p>
                                <p><img src="../assets/img/tick(3).png" alt="">数字人主播忠诚可靠，永不变心</p>

                            </div>
                        </div>

                    </span>
                </div>
            </div>
        </div>
        <div class="experience-bg" id="x1">
            <div class="experience_warpper">
                <div class="content-title">璟宸毓数字人直播，更专业体验更佳</div>
                <div class="experience-main">
                    <span class="experience-span-item c0">
                        <div class="title">璟宸毓直播</div>
                        <div class="item-box">
                            <div id="x2" class="item" @mouseover="addActive1($event)" @mouseout="removeActive1($event)"><span
                                    class="textLeft">驱动方式</span><span class="textRight">文本+语音+真人实时驱动</span>
                                <div class="icon_wrapper">
                                    <div class="icon-main">
                                        <div class="flex-box"><img src="../assets/img/tick.png" alt=""></div>
                                    </div>
                                </div>
                            </div>
                            <div id="x3" class="item " @mouseover="addActive1($event)" @mouseout="removeActive1($event)"><span
                                    class="textLeft">主播数字人</span><span class="textRight">文本+语音+真人实时驱动</span>
                                <div class="icon_wrapper">
                                    <div class="icon_wrapper">
                                        <div class="icon-main">
                                            <div class="flex-box"><img src="../assets/img/tick.png" alt=""></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="item " ><span
                                    class="textLeft">支持实时互动</span>
                                <div class="icon_wrapper">
                                    <div class="icon-main">
                                        <div class="flex-box"><img src="../assets/img/tick.png" alt=""></div>
                                    </div>
                                </div>
                            </div>
                            <div class="item " ><span
                                    class="textLeft">声音种类</span><span class="textRight">500类</span>
                                <div class="icon_wrapper">
                                    <div class="icon-main">
                                        <div class="flex-box"><img src="../assets/img/tick.png" alt=""></div>
                                    </div>
                                </div>
                            </div>
                            <div class="item " ><span
                                    class="textLeft">声功能</span>
                                <div class="icon_wrapper">
                                    <div class="icon-main">
                                        <div class="flex-box"><img src="../assets/img/tick.png" alt=""></div>
                                    </div>
                                </div>
                            </div>
                            <div class="item " ><span
                                    class="textLeft">多国语言</span>
                                <div class="icon_wrapper">
                                    <div class="icon-main">
                                        <div class="flex-box"><img src="../assets/img/tick.png" alt=""></div>
                                    </div>
                                </div>
                            </div>
                            <div class="item " ><span
                                    class="textLeft">支持数字人定制</span>
                                <div class="icon_wrapper">
                                    <div class="icon-main">
                                        <div class="flex-box"><img src="../assets/img/tick.png" alt=""></div>
                                    </div>
                                </div>
                            </div>
                            <div class="item " ><span
                                    class="textLeft">支持API调用</span>
                                <div class="icon_wrapper">
                                    <div class="icon-main">
                                        <div class="flex-box"><img src="../assets/img/tick.png" alt=""></div>
                                    </div>
                                </div>
                            </div>
                            <div class="item " ><span
                                    class="textLeft">支持私有化部署</span>
                                <div class="icon_wrapper">
                                    <div class="icon-main">
                                        <div class="flex-box"><img src="../assets/img/tick.png" alt=""></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </span>
                    <span class="experience-span-item ">
                        <div class="title">友商直播1</div>
                        <div id="x2" class="item " @mouseover="addActive1($event)" @mouseout="removeActive1($event)" ><span
                                class="textLeft">驱动方式</span><span class="textRight">文本+语音+真人实时驱动</span>
                            <div class="icon_wrapper">
                                <div class="icon-main">
                                    <div class="flex-box"><img src="../assets/img/tick.png" alt=""></div>
                                </div>
                            </div>
                        </div>
                        <div id="x3" class="item " @mouseover="addActive1($event)" @mouseout="removeActive1($event)"><span
                                class="textLeft">主播数字人</span><span class="textRight">文本+语音+真人实时驱动</span>
                            <div class="icon_wrapper">
                                <div class="icon_wrapper">
                                    <div class="icon-main">
                                        <div class="flex-box"><img src="../assets/img/tick.png" alt=""></div>
                                    </div>

                                </div>
                            </div>
                        </div>
                        
                    </span>
                    <span class="experience-span-item">
                        <div class="title">友商直播2</div>
                        <div id="box" >
                            <div id="x2" @mouseover="addActive1($event)" @mouseout="removeActive1($event)" class="item "><span class="textLeft">驱动方式</span><span class="textRight">文本+语音+真人实时驱动</span>
                                <div class="icon_wrapper">
                                    <div class="icon-main">
                                        <div class="flex-box"><img src="../assets/img/tick.png" alt=""></div>
                                    </div>
                                </div>
                            </div>
                            <div id="x3" @mouseover="addActive1($event)" @mouseout="removeActive1($event)" class="item "><span class="textLeft">主播数字人</span><span
                                    class="textRight">文本+语音+真人实时驱动</span>
                                <div class="icon_wrapper">
                                    <div class="icon_wrapper">
                                        <div class="icon-main">
                                            <div class="flex-box"><img src="../assets/img/tick.png" alt=""></div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            
                        </div>

                    </span>
                </div>
            </div>
        </div>

        <div class="energize_warpper">
            <div class="titleWrapper">
                <div class="title"><span>AI 数字人直播赋能各行各业</span></div>
            </div>
            <div class="energize-content">
                <div class="left">
                    <div class="top">
                        <div class="top-title">本地生活直播</div>
                        <div class="top-gap"></div>
                        <div class="subTitle">本地生活直播是趋势，Al数字人直播更是趋势，24小时数字人直播间，吃喝玩乐样样都行，带货能力堪比真人</div>
                    </div>
                    <div class="iconWrapper">
                        <div class="iconWrapper-item"><img src="../assets/img/bdshzb (1).png" alt="">
                            <p>本地生活直播</p>
                        </div>
                        <div class="iconWrapper-item"><img src="../assets/img/xwbb01.png" alt="">
                            <p>广电新闻直播</p>
                        </div>
                        <div class="iconWrapper-item"><img src="../assets/img/xfhyzb01.png" alt="">
                            <p>消费行业直播</p>
                        </div>
                        <div class="iconWrapper-item"><img src="../assets/img/kpfw01.png" alt="">
                            <p>知识主播直播</p>
                        </div>
                        <div class="iconWrapper-item"><img src="../assets/img/dhzc01.png" alt="">
                            <p>电商直播</p>
                        </div>
                        <div class="iconWrapper-item"><img src="../assets/img/jrxc01.png" alt="">
                            <p>金融行业直播</p>
                        </div>
                        <div class="iconWrapper-item"><img src="../assets/img/cpxc01.png" alt="">
                            <p>文旅宣传直播</p>
                        </div>
                        <div class="iconWrapper-item"><img src="../assets/img/3dszrzb (1).png" alt="">
                            <p>3D数字人直播</p>
                        </div>
                    </div>
                </div>

                <div class="right">
                    <div class="right-content">
                        <div class="video-con">
                            <img src="../assets/img/bendi.png" alt="">
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="support_warpper">
            <div class="content-title">支持的直播平台</div>
            <div class="content">
                <span class="inner"><img src="../assets/img/douyin.png" alt=""></span>
                <span class="inner"><img src="../assets/img/kuaishouzhibo.png" alt=""></span>
                <span class="inner"><img src="../assets/img/huyazhibo.png" alt=""></span>
                <span class="inner"><img src="../assets/img/douyu.png" alt=""></span>
                <span class="inner"><img src="../assets/img/bilibili.png" alt=""></span>
                <span class="inner"><img src="../assets/img/shipinhao.png" alt=""></span>
                <span class="inner"><img src="../assets/img/taobaozhibo.png" alt=""></span>
                <span class="inner"><img src="../assets/img/obs.png" alt=""></span>

            </div>
        </div>

        <button id="box" @click="ok($event)">oooooo</button>
    </div>
</template>

<script>
export default {
    props: {

    },
    data() {
        return {
            showNUm: 0,
            isActive: false,
            alDigtalHumanDrictList:[
                {title:"本地生活直播",content:"本地生活直播是趋势，Al数字人直播更是趋势，24小时数字人直播间，吃喝玩乐样样都行，带货能力堪比真人",iconShowImg:"",iconHideImg:"../assets/img/bdshzb (1).png",contentImg:'../assets/img/bendi.png'},
                {title:"广电新闻直播",content:"Al数字人可全天播报新闻，比较适合于各类财经、新闻等媒体平台，信息变化速度快，需要24小时直播",iconShowImg:"",iconHideImg:"../assets/img/xwbb01.png",contentImg:'../assets/img/guangdian.png'},
                {title:"消费行业直播",content:"各类消费产品，均可开启Al时代的日不落直播间，直播数字人比真人播报更准确，还能变换各种声音风格，花样更多",iconShowImg:"",iconHideImg:"../assets/img/xfhyzb01.png",iconHideImg:"",contentImg:'../assets/img/xiaofei.png'},
                {title:"知识博主直播",content:"知识博主变成数字人，瞬间就能解放一半时间;博主的数字分身，能帮他直播卖课、卖服务产品，分担低价值的重复I作",iconShowImg:"",iconHideImg:"../assets/img/kpfw01.png",contentImg:'../assets/img/zhishi.png'},
                {title:"电商直播",content:"化妆品、服装、穿戴设备...任何一一个网上卖的产品，都能通过数字人24小时直播,不错过任何一个闲时时间",iconShowImg:"",iconHideImg:"../assets/img/dhzc01.png",contentImg:'../assets/img/dianshang.png'},
                {title:"金融行业直播",content:"银行、保险、基金等领域，数字人可以24小时直播讲解和介绍产品，可以多语言、多风格，节省一半的人力",iconShowImg:"",iconHideImg:"../assets/img/jrxc01.png",contentImg:'../assets/img/jinrong.png'},
                {title:"文旅宣传直播",content:"24小时直播旅游景点等文旅行业，售卖景点门票、纪念品等等，让用户在欣赏旅游景点的同时，不自觉地下单购买",iconShowImg:"",iconHideImg:"../assets/img/cpxc01.png",contentImg:'../assets/img/wenlv.png'},
                {title:"3D数字人直播",content:"3D数字人直播秀场直播是最火爆、关注度最高、参与性最强的直播形式，通过3D卡通形象，展示唱歌、舞蹈等才艺获取大量粉丝",iconShowImg:"",iconHideImg:"../assets/img/3dszrzb (1).png",contentImg:'../assets/img/3dshuzi.png'},
                
            ]
        };
    },
    created() {

    },
    methods: {

        addActive($event) {
            $event.currentTarget.className = 'item iActive'
        },
        removeActive($event) {
            $event.currentTarget.className = 'item'
        },
        addActive1($event) {
            
            // $event.currentTarget.className = 'item iActive1'
            var id = $event.currentTarget.id
            var element = document.querySelectorAll("#"+id)
            element.forEach((item)=>{
                item.setAttribute("class","item iActive1")
                
            })
        },
        removeActive1($event) {
            // $event.currentTarget.className = 'item'
            var id = $event.currentTarget.id
            var element = document.querySelectorAll("#"+id)
            element.forEach((item)=>{
                item.setAttribute("class","item")
                
            })
        },
        ok(e){
            // console.log("00",e.currentTarget.parentNode)
            var element = document.querySelectorAll("#x2")
            element.forEach((item)=>{
                item.setAttribute("class","item iActive1")
                console.log('222',item)
            })
            // element.setAttribute("class","item iActive1")
            // console.log('111',element)
            console.log('111',e.currentTarget.id)
            // console.log('element',element.offsetTop)

            
        }
    },
    components: {

    },
};
</script>

<style scoped lang="less">
* {
    margin: 0;
    padding: 0;
}

.hide {
    display: none;
    overflow: hidden;
}

.center {
    width: 100%;
}

.conterText {
    width: 1200px;

}

.one {
    width: 100%;
    height: 580px;
    background-color: #040D1E;
    color: white;
    // background: url(../assets/img/bgPic.png) no-repeat;
    display: flex;
    // justify-content: space-between;
    // justify-content: center;
    // justify-content: right;
    display: flex;
    justify-content: center;

    .centerText {
        width: 1200px;
        display: flex;
        justify-content: space-between;
        position: relative;
        // background-color: #CDB79E;

        // background-color: #965d5d;
        .left {
            width: 700px;
            height: 500px;
            position: absolute;
            left: 0px;
            z-index: 2;

            h1 {
                // width: 700px;
                font-size: 72px;
                font-weight: 600;
                margin-top: 150px;
            }

            p {
                font-size: 22px;
                margin-top: 32px;

            }

            .el-button {
                width: 220px;
                height: 56px;
                border-radius: 28px;
                box-shadow: 0 10px 28px #5b83ff4d;
                margin-top: 60px;
            }
        }

        .right {
            position: absolute;
            height: 100%;
            top: 0;
            right: -360px;

            img {
                height: 100%;
                // position: absolute;
            }
        }
    }

}

.moreNeed_warpper {
    display: flex;
    justify-content: center;
}

.moreNeed_warpper .content-title {
    padding: 80px 0 32px;
}

.content-title {
    font-size: 48px;
    font-weight: 700;
    color: #222831;
    line-height: 60px;
    text-align: center;
}

.tab_warpper {
    text-align: center;
}

.tab_inner {
    height: 48px;
    background: rgb(243, 247, 253);
    line-height: 40px;
    margin: 0 auto 60px;
    font-size: 16px;
    font-weight: 600;
    color: #848c96;
}

.tab_inner_span {
    display: inline-block;
    border-radius: 29px;
    padding: 0 40px;
}

.active {
    background: #365074 !important;
    color: #fff !important;
}

.box {
    display: flex;
    height: 462px;
    justify-content: space-between;
}

.box_left {
    width: 420px;
    background-color: yellow;
    padding-top: 57px;
}

.box_left h3 {
    font-size: 24px;
    color: #2c3e50;
    margin-bottom: 24px;
}

.item_right_subTitle {
    color: #848c96;
    margin-bottom: 32px;
    width: 360px;
    font-size: 13px;
    height: 32px;
    line-height: 24px;
}

.item_right_imgList img {
    height: 18px;
    width: 18px;
    vertical-align: middle;
    margin-right: 16px;
}

.item_right_imgList p {
    font-size: 14px;
    font-weight: 400;
    color: #222831;
    line-height: 24px;
}

.box_right {
    width: 740px;
    height: 462px;
}

.swiper-slide {
    height: 100%;
}

.swiper-slide img {
    display: block;
    height: 100%;

}

.priceReviewWarppper {
    display: flex;
    justify-content: center;
    height: 940px;
}

.priceReviewWarppper .content-title {
    padding: 60px 0 80px;
}

.digitalHumanLive {
    height: 640px;
    display: flex;
    justify-content: center;

}

.dig-lt-main p,
.dig-rt-main p {
    margin-bottom: 16px;
}

.dig-lt-main-tit,
.dig-rt-main-tit {
    margin-bottom: 32px;
    font-size: 28px;
    font-weight: 600;
    color: #222831;
    line-height: 36px;
}

.dig-lt-main img {
    width: 14px;
    height: 14px;
    margin-right: 14px;
}

.dig-rt-main img {
    width: 18px;
    height: 13px;
    margin-right: 14px;
}

.dig-left {
    width: 580px;
    margin-top: 20px;
    background: no-repeat url(../assets/img/chuantongbg.png);
    background-size: cover;
    border-radius: 10px 0 0 10px;
}

.dig-l-main {
    height: 100%;
    padding: 25px 40px 0px;
}

.dig-lt-img {
    width: 500px;
    height: 248px;
}

.dig-lt-img img {
    width: 100%;
    height: 100%;
}

.dig-lt-main {
    margin-top: 30px;
    padding-left: 115px;
}

.dig-right {
    width: 620px;
    // height: 100%;
    background: linear-gradient(226deg, #d9eeff 0%, #c6d8ff 100%);
    padding: 36px 40px;
    border-radius: 10px 24px 24px 10px;
}

.dig-r-main {
    height: 100%;
}

.dig-rt-img {
    height: 251px;
}

.dig-rt-img img {
    width: 100%;
    height: 100%;
}

.dig-rt-main {
    margin-top: 36px;
    padding-left: 120px;

}

.experience-bg {
    background-color: #f3f7fd;
}

.experience_warpper {
    width: 1200px;
    height: 830px;
    margin: 0 auto;

}

.experience_warpper .content-title {
    padding: 80px 0 60px;
}

.experience-main {
    height: 530px;
    display: flex;
    justify-content: space-between;

    // background: skyblue;
}

.c0 {
    color: #fff;
    background: linear-gradient(218deg, #308dff 0%, #046fff 100%) !important;
}

.experience-span-item {
    width: 390px;
    height: 100%;
    background: white;
    border-radius: 16px;
    text-align: center;
    padding: 40px 20px 0;
    box-sizing: border-box;
    position: relative;
}

.title {
    margin-bottom: 31px;
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;

}

.item {
    position: relative;
    padding: 0 10px;
    width: 360px;
    height: 44px;
    line-height: 44px;
    border-bottom: 1px solid;
    border-color: #f3f3f429;
    box-sizing: border-box;
}

.iActive {
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.2) !important;
    // background-color: pink;
}

.iActive1 {
    border-radius: 8px;
    background: pink !important;
    // background-color: pink;
}

.textLeft {
    float: left;
    height: 22px;
    font-size: 14px;
    font-weight: 400;
    line-height: 44px;
}

.textRight {
    position: absolute;
    right: 22px;
    margin-right: 38px;
    height: 22px;
    font-size: 14px;
    line-height: 44px;
}

.icon_wrapper {
    height: 100%;
    width: 22px;
    float: right;
}

.icon-main {
    height: 100%;
    display: flex;
    align-items: center;
}

.flex-box {
    display: flex;
    align-items: center;
    background: white;
    border-radius: 50%;

}

.icon_wrapper img {
    height: 20px;
    width: 20px;
}

.energize_warpper {
    box-sizing: border-box;
    width: 1200px;
    height: 866px;
    background-color: white;
    margin: 0 auto;

}

.titleWrapper {
    padding: 80px 0 56px;
}

.titleWrapper .title {
    text-align: left;
    font-weight: 600;
    font-size: 44px;
    color: rgb(34, 40, 49);
}

.titleWrapper .title span {
    margin-left: 102px;
}

.energize-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding: 89px 104px 0 102px;
    height: 570px;
    width: 1200px;
    border-radius: 16px;
    background: linear-gradient(134deg, #ebf2fc 0%, #d5e1f9 100%);

    .left {
        width: 636px;
        height: 100%;
        box-sizing: border-box;

        .top {
            padding-left: 14px;

            .top-title {
                font-size: 26px;
                font-weight: 500;
                color: #222831;
                line-height: 37px;
                margin-bottom: 12px;
            }

            .top-gap {
                width: 50px;
                height: 6px;
                border-radius: 1px;
                margin-bottom: 30px;
                background: linear-gradient(90deg, #308dff 0%, #006eff 100%);
            }

            .subTitle {
                width: 520px;
                height: 48px;
                font-size: 16px;
                font-weight: 400;
                color: #222831;
                line-height: 24px;
                margin-bottom: 57px;
            }
        }

        .iconWrapper {
            width: 500px;
            display: flex;
            flex-wrap: wrap;

            // box-sizing: border-box;
            .iconWrapper-item {
                // box-sizing: border-box;
                margin-right: 30px;
                margin-bottom: 32px;
                display: flex;
                justify-content: center;
                flex-direction: column;
                align-items: center;
                flex-shrink: 0;
                width: 90px;

                img {
                    width: 48px;
                    height: 48px;

                }

                p {
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 22px;
                    margin-top: 5px;
                }

            }
        }
    }

    .right {
        position: relative;
        flex: 1;

        .right-content {
            position: absolute;
            width: 477px;
            height: 686px;
            top: -193px;
            left: 0;
            background: url(../assets/img/bdshzbbg.png);
            background-size: cover;

            .video-con {
                width: 344px;
                height: 614px;
                position: absolute;
                left: 0;
                top: 0;
                border-radius: 8px;
                overflow: hidden;
                display: flex;
                align-items: center;
                justify-content: center;

                img {
                    max-height: 100%;
                    max-width: 100%;
                    object-fit: cover;
                }
            }
        }
    }
}

.support_warpper {
    width: 1200px;
    height: 628px;
    box-sizing: border-box;
    margin: 0 auto;
    background: linear-gradient(180deg, #ffffff 0%, #f3f7fd 100%);

    .content-title {
        font-size: 48px;
        line-height: 60px;
        font-weight: 700;
        color: #222831;
        text-align: center;
        padding: 80px 60px;
    }

    .content {
        width: 1200px;
        height: 344px;
        justify-content: space-between;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;

        span {
            width: 288px;
            height: 156px;
            background: #fff;
            border-radius: 8px;
            position: relative;

            img {
                // height: 70px ;
                width: 169px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
    }
}</style>
